<script setup>
import { ref, toRef, computed } from 'vue';
import List from './components/List.vue'
import Leaderboard from './components/Leaderboard.vue'
import Review from './components/Review.vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'

import { findDetailAPI } from '@/apis/details.js'

const route = useRoute()
const id =route.params.id;
const detail = ref({})
// 获取电影详情
const getDetail = async () => {
  const res = await findDetailAPI(id)
  detail.value = res
  console.log(res);
  
}

getDetail(6)

const parentRef = ref(null);


const index = ref("0")


const message = computed(() => {


  if (index.value == 0) {
    return '很差';

  } else if (index.value == 1) {
    return '较差';
  }
  else if (index.value == 2) {
    return '还行';
  }
  else if (index.value == 3) {
    return '推荐';
  }
  else if (index.value == 4) {
    return '力荐';
  }
  return '';
});



// 评分事件
const starClick = (event) => {

  if (event.target.tagName === 'LI') {
    // 获取点击的元素
    const clickedElement = event.target;

    // 获取父元素
    const parentElement = toRef(parentRef, 'value');
    const children = Array.from(parentElement.value.querySelectorAll('li'));
    // 获取点击元素的索引
    index.value = children.indexOf(clickedElement);
    // 获取到所有的元素
    const childrenElements = Array.from(parentElement.value.children);
    // 获取添加的所有元素
    const targetElements = childrenElements.slice(0, index.value + 1);

    childrenElements.forEach(element => {
      element.classList.remove('light');
    });


    targetElements.forEach(element => {
      element.classList.add('light');
    });

    ElMessage({
      message: '打分成功，感谢您的评价',
      type: 'success',
    })
  }
};







</script>

<template>
  <div class="container">
    <!-- 电影详情展示 -->
    <el-row>
      <el-col :span="5">
        <div class="movie_imgBox">

          <a href="#"> <img style="width: 250px; height: 350px;" :src="detail.pic" alt="" /></a>
          <span class="movie_text">{{ detail.num == 0 ? "完结" :"更新至"+detail.num+"集"  }}</span>

        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content ep-bg-purple-light" />
        <div class="movie_info">
          <h1>{{ detail.title }}</h1>

          <p>地区：中国大陆 类型：{{ detail.tags  }} 上映时间：{{ detail.createdTime  }}豆瓣评分：{{ detail.star  }}</p>
          <p>语言：汉语普通话状态：更新至 {{ detail.num  }}  集 - 可以高清免费在线观看</p>
          <p>导演：{{ detail.director  }}</p>
          <p>主演：{{ detail.actor  }}</p>
          <p>更新时间：{{ detail.updatedTime  }}</p>

          <div class="movie_btns">
            <el-button class="movie_btn" color="#ff5f00" :dark="isDark" plain><RouterLink active-class="active" to="/video/66">在线观看</RouterLink></el-button>
            <el-button class="movie_btn" color="#ff5f00" :dark="isDark" plain>急速观看</el-button>

          </div>
        </div>
        <div>

        </div>
      </el-col>
      <el-col :span="4">
        等待开发区域
      </el-col>
    </el-row>

    <div class="movie_desc">
      <div class="box">
        <ul>
          <li>
            <input type="radio" name="check" id="active1" checked><label for="active1">剧情介绍</label>
            <div class="desc">
              <p class="desc_text">{{ detail.des }}
              </p>
              <p>
                全部来源：【吉吉影音】【西瓜电影】【天堂影视】【爱奇艺】【暴风影音】【迅雷下载】【优酷视频】【百度云网盘】【哔哩bilibili】
              </p>
            </div>
          </li>
          <li>
            <input type="radio" name="check" id="active2"><label for="active2">我要评分</label>
            <div>
              <h2>给【我的人间烟火】打分： {{ message }}</h2>
              <!-- 创建评分的容器 -->
              <div class="star-wrapper" @click="starClick">
                <!-- 创建星星 -->
                <ul class="star" ref="parentRef" id="stars">
                  <li class="iconfont icon-remen light"></li>
                  <li class="iconfont icon-remen "></li>
                  <li class="iconfont icon-remen"></li>
                  <li class="iconfont icon-remen"></li>
                  <li class="iconfont icon-remen"></li>
                </ul>
              </div>

            </div>
          </li>

        </ul>
      </div>

    </div>


    <el-row>
      <el-col :span="16">
        <List></List>
        <List></List>
        <Review></Review>
      </el-col>
      <el-col :span="8">
        <Leaderboard></Leaderboard>
      </el-col>
    </el-row>





  </div>
</template>


<style scoped lang='scss'>
.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.container {
  .movie_imgBox {
    position: relative;

    .movie_text {
      position: absolute;
      bottom: 5px;
      color: #f8f8f8;
      font-weight: bold;
      left: 10px;
    }


  }

  .movie_info {
    margin-left: 8px;

    h1 {
      margin-bottom: 10px;
    }

    p {
      margin-top: 5px;
      color: #666;
    }

    .movie_btns {
      .movie_btn {
        margin-top: 50px;
        width: 200px;
        height: 45px;
        margin-left: 10px;
      }

    }
  }

  .movie_desc {

    margin-top: 20px;

    /* 宽度为屏宽的一半，高度为屏高的一半，然后居中 */
    .box {
      width: 100%;
      height: 50vh;
      text-align: center;
    }

    /* 清除li样式 */
    ul,
    li {
      list-style: none;
    }

    /* 将ul相对定位，目的是让内容的div绝对定位时相对ul定位，否则会相对body定位 */
    /* ul弹性盒，目的是让li横着排，也可以将li浮动或者转行内块 */
    ul {
      position: relative;
      display: flex;
    }

    /* 将三个li宽度平分，高度60px */
    li {
      flex: 1;
      height: 60px;
    }

    /* input隐藏 */
    input {
      display: none;
    }

    .desc {
      margin-top: 20px;

      .desc_text {
        font-size: 18px;
        text-align: left;
      }
    }


    /* 设置input的下一个节点label的样式 */
    input+label {
      display: block;
      width: 100%;
      height: 100%;
      font-size: 18px;
      line-height: 60px;
      color: #333;
    }


    /* 设置div内容的基础样式 隐藏内容div*/
    input+label+div {
      display: none;
      position: absolute;
      left: 0;
      top: 60px;
    }

    /* input选中状态时候对应的label的样式 */
    input:checked+label {
      color: #ff5f00;
      border: 1px solid #ff5f00;
    }

    /* input选中时候显示对应的div */
    input:checked+label+div {
      display: block;
    }

    /* 设置下边的内容 */
    .star-wrapper {
      font-size: 22px;
      height: 46px;
      line-height: 46px;
      color: #ddd;
      padding: 0 16px;
      /* 设置星星的样式 */

      .star {
        float: left;

      }

      .star li {
        font-size: 26px;
      }

      .light {
        color: #ff5f00;
      }

      .weibo {
        float: right;
      }
    }



  }

}</style>